<template>
	<view>
		<view class="navbar-bg"></view>
		<view class="userinfo">
			<view class="info flex align-center justify-between" style="width: 100%;">
				<view class="flex align-center">
					<u-avatar :src="userInfo.avatar" size="92rpx"></u-avatar>
					<view class="u-m-l-20">
						<view class="u-font-26" style="color: #181919;">
							{{centShopInfo.name?centShopInfo.name:'未绑定店铺'}}<!-- <text @click="show=true;"
								style="color: #999; font-size: 26rpx;margin-left: 40rpx;">切换店铺</text> -->
						</view>
						<!-- <view class="u-m-t-10" style="color: #888888;">{{userInfo.phone?userInfo.phone:'未绑定手机号'}}</view> -->
					</view>
				</view>
				<!-- <u-icon name="arrow-right" size="18" @click="route"></u-icon> -->


			</view>
		</view>

		<!-- <view class="flex align-center justify-between u-m-l-32 u-m-r-32 u-m-t-20 card-lg">
			<view @click="$u.route('/pages/personal/coupon/coupon')" class="flex align-center">
				<u-icon name="/static/personal/p-yhj.png" size="76rpx"></u-icon>
				<view class="u-m-l-22">
					<view>
						<text class="text-bold text-black u-font-36">0</text>
						<text class="u-font-24">/张</text>
					</view>
					<view class="u-font-xs text999">优惠券</view>
				</view>
			</view>
			<view class="btn">领取优惠券</view>
		</view> -->

		<view class="flex align-center justify-between u-m-l-32 u-m-r-32 u-m-t-20">
			<view class="card flex align-center">
				<u-icon name="/static/personal/p-xyk.png" size="76rpx"></u-icon>
				<view class="u-m-l-22">
					<view>
						<text class="u-font-24">￥</text>
						<text class="text-bold text-black u-font-36">{{parseFloat(centShopInfo.balance?centShopInfo.balance:0).toFixed(2)}}</text>
					</view>
					<view class="u-font-xs text999">账户余额</view>
				</view>
				<view @click="handleRechange"
					style="width: 160rpx;height: 60rpx;background-color: #81D8CF;color: aliceblue;line-height: 60rpx;text-align: center;border-radius: 5rpx;margin-left: 260rpx;margin-right: 20rpx;">
					充值</view>
			</view>

		</view>



		<view class="u-m-l-32 u-m-r-32 u-m-t-20 bg-white cell-group">
			<u-cell-group>

				<u-cell title="账户明细" :isLink="false" @click="handleAccountLog()">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/cell-wwfp.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				<u-cell title="店铺绑定" :isLink="false" @click="$u.route('/pages/personal/service/centShopList')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/tab_shop.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>
				<u-cell title="客服咨询" :isLink="false" @click="$u.route('/pages/personal/service/kefuzhixun')">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/kefu.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell>

				<!-- <u-cell title="店铺管理" :isLink="false" @click="$u.route('/subpkg/store/store')" v-if="userInfo.type==1">
					<view slot="icon" class="u-m-r-20">
						<u-icon name="/static/personal/tab_shop.png" size="44rpx"></u-icon>
					</view>
					<view slot="right-icon">
						<u-icon name="arrow-right" size="26rpx"></u-icon>
					</view>
				</u-cell> -->

			</u-cell-group>
		</view>

		<login ref="login" @refresh="refresh"></login>
		<u-picker :show="show" :columns="companyList" keyName="name" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import login from '@/components/x-unit/login/login.vue'
	import {

		getUserInfo,
		getUserInfoCentShopList
	} from "@/common/api/api.js"
	export default {
		components: {
			login
		},
		data() {
			return {
				token: '',
				userInfo: '',
				userAccountList: [], // 用户账户列表
				userAccount: {
					account: 0,
					id: '',
					accountName: ''
				},
				userInfoId: '',
				companyBalance: 0,
				show: false,
				companyList: [],
				centShopInfo: {name:'',balance:0}


			}
		},
		onLoad() {},
		onShow() {
			this.refresh();
			if (!this.$store.state.$token) {
				setTimeout(() => {
					this.$refs.login.open();
				}, 100);
			}
			this.userInfoId = this.$store.state.$token;
			// this.getUserInfoCentShopList();
			this.centShopInfo=this.$store.state.$centShopInfo;
			console.log("centShopId",this.$store.state.$centShopInfo);
			
		},
		methods: {
			handleAccountLog(){
				if(this.centShopInfo){
					this.$u.route('pages/bill/accountlog/accountLogList?centShopId='+this.centShopInfo.centShopId)
				}else{
					uni.$u.toast("请先绑定店铺！");
				}
			},
			handleRechange(){
				if(this.centShopInfo){
					this.$u.route('/pages/personal/rechange/index?centShopId='+this.centShopInfo.centShopId+'&name='+this.centShopInfo.name)
				}else{
					uni.$u.toast("请先绑定店铺！");
				}
				
			},
			confirm(e) {
				console.log(e)
				this.show = false;
				this.centShopInfo=e.value[0];
			},
			cancel() {
				this.show = false;
			},
			route() {
				if (this.token) {
					uni.$u.route('/pages/personal/userInfo/userInfo');
				} else {
					this.$refs.login.open();
				}
			},
			// 获取用户绑定店铺
			getUserInfoCentShopList() {
				this.companyList = [];
				getUserInfoCentShopList({
					userInfoId: this.userInfoId
				}).then(res => {
					this.userInfoCentShopList = res.data.list;
					this.companyList.push(res.data.list);
					if (this.userInfoCentShopList.length > 0) {
						this.centShopInfo = this.userInfoCentShopList[0];
						this.handleGetToDayOrderBill(this.centShopInfo.centShopId);
					}

				})
			},
			refresh() {
				getUserInfo({
					userInfoId: this.$store.state.$token
				}).then(res => {
					this.$store.commit('$uStore', {
						name: '$userInfo',
						value: res.data
					});
					this.token = this.$store.state.$token;
					this.userInfo = this.$store.state.$userInfo;
					this.companyBalance = this.userInfo.companyBalance;
				})

			}
		},
		onPullDownRefresh() {
			uni.hideLoading();
		}
	}
</script>
<style>
	>>>.u-cell__body {
		padding: 40rpx 0rpx !important;
	}

	button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		text-align: left;
	}

	button::after {
		border: none;
	}
</style>
<style lang="scss">
	.navbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 750rpx;
		height: 316rpx;
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #81D8CF 100%);
		backdrop-filter: blur(50rpx);
	}

	.userinfo {
		position: relative;
		height: 316rpx;
		width: 100%;

		.info {
			position: absolute;
			bottom: 0;
			z-index: 99;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-bottom: 20rpx;
		}
	}

	.card {
		width: 100%;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 20rpx;
		padding-top: 44rpx;
		padding-bottom: 44rpx;
	}

	.card-lg {
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding-left: 20rpx;
		padding-top: 44rpx;
		padding-bottom: 44rpx;
	}

	.cell-group {
		padding: 0 32rpx;
		border-radius: 16rpx;
	}

	.btn {
		width: 144rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #FCBB2B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 20rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
	}
</style>